<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">

<%--<script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>--%>
<script src="ReadingOcean/resources/diy/jquery.min.js"></script>

<style>
    /* common */

    body {
        font-family: 'Hiragino Sans GB', 'Microsoft YaHei',
        'WenQuanYi Micro Hei', sans-serif;
        width: 100%;
        height: 100%;
        /*background: url(ReadingOcean/resources/common/images/BG.jpg) fixed center no-repeat;*/
        background: url(ReadingOcean/resources/common/images/myBG/wallhaven-73p62e.jpg) fixed center no-repeat;
        background-size: cover;
    }

    /* header */
    .common-header {
        position: relative;
        height: 100px;
        margin: 0 auto;
        padding: 17px 0px;
        text-align: center;
        /*background-color: rgba(36, 36, 21, .4);*/
    }

    @media all and (orientation : portrait) {}

    @media all and (orientation : landscape) {
        .common-header {
            width: 1160px;
            min-width: 960px;
        }

        .common-header-bubugao {
            width: 900px;
            min-width: 960px;
        }
    }

    .common-header .common-header-logo {
        display: block;
        float: left;
        width: 70px;
    }

    .common-header-logo {
        position: relative;
        left: 10px;
    }

    .common-header .common-header-nav {
        position: relative;
        right: 40px;
        display: inline-block;
        padding: 10px;
        border-radius: 25px;
        background: linear-gradient(#0080ff, #0c61b8);
    }

    .common-header .common-header-nav li {
        font-size: 1em;
        float: left;
        list-style: none;
    }

    .common-header .common-header-nav li a {
        display: block;
        width: 100px;
        margin: 0 5px;
        padding: 7px 0;
        transition: .4s;
        text-align: center;
        color: #fff;
        border-radius: 15px;
        text-decoration: none;
    }

    .common-header .common-header-nav li a:hover {
        color: #0c61b8;
        background-color: #fff;
    }

    /* 实现导航高亮 */
    body.index a.index {
        color: #0c61b8;
        background-color: #fff;
    }

    body.scoreAnswer a.scoreAnswer {
        color: #0c61b8;
        background-color: #fff;
    }

    body.forum a.forum {
        color: #0c61b8;
        background-color: #fff;
    }

    body.book a.book {
        color: #0c61b8;
        background-color: #fff;
    }

    body.task a.task {
        color: #0c61b8;
        background-color: #fff;
    }

    body.pTask a.pTask {
        color: #0c61b8;
        background-color: #fff;
    }

    body.readForum a.readForum {
        color: #0c61b8;
        background-color: #fff;
    }

    body.oceanWorld a.oceanWorld {
        color: #0c61b8;
        background-color: #fff;
    }

    body.tiny a.tiny {
        color: #0c61b8;
        background-color: #fff;
    }

    /* 实现导航高亮 结束*/
    .common-header .common-header-personal {
        position: absolute;
        z-index: 1;
        top: 25px;
        right: 5px;
        display: inline-block;
        float: right;
        transition: .3s;
        border-radius: 15px;
    }

    .common-header .common-header-personal li img {
        position: absolute;
        top: -3px;
        left: -25px;
        width: 50px;
        height: 50px;
        border: 2px solid #3cabdf;
        border-radius: 50%;
        background-color: #fff;
    }

    .common-header .common-header-personal>li>a {
        display: block;
        width: 110px;
        /*margin-left: 20px;*/
        /*padding: 11px;*/
        padding: 11px;
        color: #fff;
        border-radius: 15px;
        background-color: #3cabdf;
        text-decoration: none;
    }

    .common-header .common-header-personal>li:hover ul {
        display: block;
    }

    .common-header .common-header-personal li a:hover {
        background-color: #188bd0;
    }

    .common-header .common-header-personal li ul {
        display: none;
        overflow: hidden;
        width: 100px;
        margin: 0 auto;
        border-top: none;
        border-bottom-right-radius: 15px;
        border-bottom-left-radius: 15px;
    }

    .common-header .common-header-personal li ul a {
        display: block;
        margin: 0 auto;
        padding: 8px 3px;
        transition: .4s;
        color: #fff;
        background-color: #3cabdf;
        text-decoration: none;
    }

    .common-header .common-header-personal li ul li+li a {
        border-top: 2px solid #3cabdf;
    }

    /*修改密码弹出层*/
    #common-popup {
        background: rgba(188, 188, 188, .5);
        position: fixed;
        width: 100%;
        height: 100%;
        bottom: 0;
        left: 0;
        display: none;
        z-index: 2;
    }

    #common-modifyForm {
        display: none;
        position: fixed;
        top: 50%;
        left: 50%;
        margin-top: -180px;
        margin-left: -180px;
        width: 360px;
        height: 330px;
        padding: 20px;
        background: #0c61b8;
        box-shadow: 0px 0px 5px #333;
        color: #fff;
        z-index: 3;
        border-radius: 10px;
        box-sizing: border-box;
    }

    #common-modifyForm tr {
        float: left;
    }

    #common-modifyForm tr label {
        text-align: left;
        display: inline-block;
        width: 100px;
        margin: 10px 5px;
    }

    .common-close {
        float: right;
        margin-right: -10px;
        margin-top: -20px;
        cursor: pointer;
    }

    #common-modifyForm h2 {
        margin-left: 20px;
        margin-bottom: 20px;
        font-weight: bold;
        font-size: 24px;
    }

    #common-modifyForm input {
        width: 195px;
        margin: 10px auto;
        border-width: 0px;
        border-radius: 15px;
        padding: 5px;
        padding-left: 20px;
        box-sizing: border-box;
    }

    #common-modifyForm span input {
        width: 50px;
        margin: 10px auto;
        margin-left: 30px;
    }

    #savePwd {
        border-radius: 5px;
        border: none;
        font-weight: 700;
        font-size: 14px;
        margin-top: 30px;
        background-color: #5bc0de;
        color: #fff;
    }

    #savePwd:hover {
        background-color: #3cabdf;
    }

    .c {
        /* 相对定位 */
        position: absolute;
        margin-left: 28px;
        margin-top: -35px;
        width: 12px;
        height: 12px;
        background: red;
        border-radius: 6px;
    }

</style>

<!-- header 公共头部 -->
<div class="common-header ">

    <!-- 头部logo -->
    <img class="common-header-logo" src="ReadingOcean/resources/index/images/logo1.0.png" alt="logo">

    <!-- 头部导航 -->
    <ul class="common-header-nav">
        <li><a class="index" href="ReadingOcean/user/index" class="current">首页</a></li>
        <li><a class="task" href="ReadingOcean/task/myTask?type=my_reading">我的任务</a><span class="cc"></span></li>

        <!-- 隐藏字段，判断用户身份，供js获取使用 -->
        <span id="userType" style="display: none;">student</span>

        <li><a class="book" href="">书香门第</a></li>
        <li><a class="forum" href="book">作品社区</a></li>
        <li><a class="oceanWorld" href="">海洋世界</a></li>
        <li><a class="tiny" href="">名师微课</a></li>
        <li><a class="scoreAnswer" href="">故事新编</a></li>
        <li><a class="readForum" href="">家长阅读</a><span class="cc"></span></li>

    </ul>

    <!-- 头部个人功能栏 -->
    <ul class="common-header-personal">
        <li>
<%--            <img src="ReadingOcean/user/middle/logo.jpg">--%>
            <a href="#"><%=session.getAttribute("st_name")%></a>
            <ul>
                <li><a href="ReadingOcean/user/info?type=my">个人中心</a></li>
                <li><a href="ReadingOcean/reports/index">阅读报告</a></li>
                <li><a href="#" onclick="updatePwd()">修改密码</a></li>
                <li><a href="ReadingOcean/user/logout" id="logout">退出</a></li>
            </ul>
        </li>
    </ul>


    <!-- 弹出层 -->
    <div id="common-popup"></div>
    <!-- 修改资料表单 -->
    <div id="common-modifyForm">
        <h2>
            修改密码 <span class="common-close" type="button" onclick="closeUpdatePwd()">╳</span>
        </h2>
        <table>
            <tr>
                <td><label>旧密码</label></td>
                <td><input type="password" id="common-oldPwd" name="oldPwd" placeholder="输入旧密码"></td>
            </tr>
            <tr>
                <td><label>新密码</label></td>
                <td><input id="common-newPwd" type="password" name="newPwd" placeholder="输入新密码"></td>
            </tr>
            <tr>
                <td><label>确认新密码</label></td>
                <td><input id="common-confirmPwd" type="password" name="confirmPwd" placeholder="再次输入新密码"></td>
            </tr>
        </table>
        <button id="savePwd" style="padding: 10px 20px;" type="button" onclick="submitForm()">保存</button>
    </div>
    <script type="text/javascript">
        var path = $('#path').val();
        $(function () {
            task();
        });
        function updatePwd() {
            $("#common-popup").show();
            $("#common-modifyForm").show();
        }

        /* 关闭修改表单 */
        function closeUpdatePwd() {
            $("#common-popup").hide();
            $("#common-modifyForm").hide();

            $("#common-oldPwd").val("");
            $("#common-newPwd").val("");
            $("#common-confirmPwd").val("");
        }

        //提醒是否要提交表单
        function submitForm() {
            var flag = true;
            //检查校验
            var oldPwd = $("#common-oldPwd").val();
            var newPwd = $("#common-newPwd").val();
            var confirmPwd = $("#common-confirmPwd").val();
            if (oldPwd == "" || newPwd == "" || confirmPwd == "") {
                alert("输入框不能空");
                flag = false;
            }
            if (newPwd != confirmPwd) {
                alert("新密码不一致，请再次确认新密码是否输入正确");
                flag = false;
            }

            if (flag) {
                var conf = confirm("确定提交吗？ ");
                if (conf == true) {
                    $.post("ReadingOcean/user/pwd/modify", { "oldPwd": oldPwd, "newPwd": newPwd }, function (data) {
                        if (data.code == 200) {
                            alert("修改密码成功!");
                            closeUpdatePwd();
                        } else {
                            alert("修改密码失败！错误代码：" + data.code + "；错误信息：" + data.result);
                        }
                    });
                }
            }
        }
    </script>
</div>

<%--diy--%>

<style>

    .mypager {
        width: 960px;
        margin: 15px auto;
        text-align: center;
    }

    .mypager a {
        font-size: 11px;
        padding: 6px 15px;
        -webkit-transition: all .5s;
        -moz-transition: all .5s;
        /* Safari 和 Chrome */
        -o-transition: all .5s;
        transition: all .5s;
        text-decoration: none;
        color: #5591eb;
        border: 2px solid #0881cf;
        border-radius: 2px;
        background-color: #fff;
    }

    .mypager a:hover {
        color: #fff;
        background-color: #0881cf;
    }

</style>

<script>
    // $(document).ready(function () {
    //     $(".myli").click(function () {
    //         $(this).addClass("current");
    //     })
    // });

    //点击主题div即点击链接
    // function clickLink() {
    //     $('.topic').click(function (event) {
    //         $(this).find('a')[0].click();
    //     });
    // }
</script>